<template>
	<view class="wrap">
		<view class="map">
			<map v-if="stationInfo.data" style="width: 100%; height: 100%;" :latitude="covers[0].latitude"
				:longitude="covers[0].longitude" :markers="covers">
			</map>
		</view>
		<view v-if="Object.keys(stationInfo).length !== 0" class="stationInfo row flex-column j-sb">
			<view class="stationName">
				{{stationInfo.data.name}}
			</view>
			<view class="infoItem row">
				<view class="infoName">
					编号:
				</view>
				<view class="infoValue">
					{{stationInfo.data.sn}}
				</view>
			</view>
			<view class="infoItem row">
				<view class="infoName">
					通信:
				</view>
				<view class="infoValue row a-center">
					<view class="statusIcon">
						<image v-if="stationInfo.data.status === '在线'" style="width: 11px;height: 11px;"
							src="../../static/index/statusIcon.png" mode="">
						</image>
						<image v-else style="width: 11px;height: 11px;" src="../../static/index/statusIcon1.png"
							mode="">
						</image>
					</view>
					<view>
						{{stationInfo.data.status}}
					</view>
				</view>
			</view>
			<view class="infoItem row">
				<view class="infoName">
					联系:
				</view>
				<view class="infoValue">
					{{stationInfo.data.first_contacts}}
				</view>
			</view>
			<view class="infoItem row">
				<view class="infoName">
					电话:
				</view>
				<view class="infoValue">
					{{stationInfo.data.first_contacts_phone}}
				</view>
			</view>
			<view class="infoItem row flex-nowrap">
				<view class="infoName">
					地址:
				</view>
				<view class="infoValue">
					{{stationInfo.data.address}}
				</view>
			</view>
			<view class="infoItem row">
				<view class="infoName">
					单位:
				</view>
				<view class="infoValue">
					{{stationInfo.data.use_company}}
				</view>
			</view>
		</view>
		<view class="dataStatus" v-if="Object.keys(stationInfo).length !== 0">
			<uni-section title="数据动态" titleFontSize="28rpx" titleColor="#212121">
				<template v-slot:decoration>
					<view class="decoration"></view>
				</template>
				<view class="dataWrap row j-center">
					<view class="dataItem row a-center">
						<view class="dataIcon">
							<image style="width: 80rpx;height: 80rpx;" src="../../static/stationBoard/data1.png"
								mode=""></image>
						</view>
						<view class="dataInfo">
							<view class="dataName">
								运行状态
							</view>
							<view class="dataStatus">
								{{stationInfo.real_data.status}}
							</view>
						</view>
					</view>
					<view class="dataItem row a-center">
						<view class="dataIcon">
							<image style="width: 80rpx;height: 80rpx;" src="../../static/stationBoard/data2.png"
								mode=""></image>
						</view>
						<view class="dataInfo">
							<view class="dataName">
								监控
							</view>
							<view class="dataStatus">
								{{stationInfo.real_data.camera}}
							</view>
						</view>
					</view>
					<view class="dataItem row a-center">
						<view class="dataIcon">
							<image style="width: 80rpx;height: 80rpx;" src="../../static/stationBoard/data3.png"
								mode=""></image>
						</view>
						<view class="dataInfo">
							<view class="dataName">
								离线故障数
							</view>
							<view class="dataStatus">
								{{stationInfo.real_data.faultNum}}
							</view>
						</view>
					</view>
					<view class="dataItem row a-center">
						<view class="dataIcon">
							<image style="width: 80rpx;height: 80rpx;" src="../../static/stationBoard/data4.png"
								mode=""></image>
						</view>
						<view class="dataInfo">
							<view class="dataName">
								巡检通道数
							</view>
							<view class="dataStatus">
								{{stationInfo.real_data.channelNum}}
							</view>
						</view>
					</view>

				</view>
			</uni-section>
		</view>
		<view class="alarm" v-if="Object.keys(stationInfo).length !== 0">
			<uni-section title="告警事件" titleFontSize="28rpx" titleColor="#212121">
				<template v-slot:decoration>
					<view class="decoration"></view>
				</template>
				<view class="alarmWrap">
					<view v-if="stationInfo.alarm.length" class="alarmItem" v-for="(item,index) in stationInfo.alarm" :key="index" @click="ceshi">
						<view class="top row">
							<view class="topStatus row j-center a-center"
								:class="{
									tishi:item.alarm_level === '提示',
									yiban:item.alarm_level === '一般',
									zhongyao:item.alarm_level === '重要',
									jinji:item.alarm_level === '紧急'
								}">
								{{item.alarm_level}}
							</view>
							<view class="desc">
								{{item.event_desc}}
							</view>
						</view>
						<view class="bottom row j-sb a-center">
							<view class="time">
								{{item.created_at}}
							</view>
							<view class="delStatus">
								{{item.status}}
							</view>
						</view>
					</view>
					<view v-else class="noData row j-center a-center" style="height: 300rpx;">
						<image style="width: 200rpx;height: 200rpx;" src="../../static/index/noData.png" mode="">
						</image>
					</view>
				</view>
			</uni-section>
		</view>
		<view class="alarm" v-if="Object.keys(stationInfo).length !== 0">
			<uni-section title="故障处理" titleFontSize="28rpx" titleColor="#212121">
				<template v-slot:decoration>
					<view class="decoration"></view>
				</template>
				<view class="alarmWrap" style="min-height: 300rpx;">
					<view v-if="stationInfo.breakdown.length" class="alarmItem"
						v-for="(item,index) in stationInfo.breakdown" :key="index">
						<view class="top row">
							<view 
							class="topStatus row j-center a-center" 
							:class="{
								zhongda: item.breakdown_level === '重大',
								yanzhong: item.breakdown_level === '严重',
								yiban: item.breakdown_level === '一般',
								qingwei: item.breakdown_level === '轻微',
							}">
								{{item.breakdown_level}}
							</view>
							<view class="desc">
								{{item.desc}}
							</view>
						</view>
						<view class="bottom row j-sb a-center">
							<view class="time">
								{{item.created_at}}
							</view>
							<view class="delStatus">
								{{item.status}}
							</view>
						</view>
					</view>
					<view v-else class="noData row j-center a-center" style="height: 300rpx;">
						<image style="width: 200rpx;height: 200rpx;" src="../../static/index/noData.png" mode="">
						</image>
					</view>
				</view>
			</uni-section>
		</view>
		<!-- <view class="video" v-if="Object.keys(stationInfo).length !== 0">
			<uni-section title="视频监控" titleFontSize="28rpx" titleColor="#212121">
				<template v-slot:decoration>
					<view class="decoration"></view>
				</template>
				<view class="videoWrap">
					<view class="videoPlay">
						<image @click="goVideoPlay" style="width: 100%;height: 100%;" src="../../static/stationBoard/preview.png" mode=""></image>
					</view>
				</view>
			</uni-section>
		</view> -->
		<view class="video" v-if="stationInfo.camera.length">
		<!-- <view class="video" v-if="Object.keys(stationInfo).length !== 0"> -->
			<uni-section title="视频监控" titleFontSize="28rpx" titleColor="#212121">
				<template v-slot:decoration>
					<view class="decoration"></view>
				</template>
				<view class="videoWrap row">
					<div class="item" v-for="(item, key) in stationInfo.camera" :key="key" @click="goVideoPlay(item)">
						<div class="cameraName">{{item.camera_name}}{{item.camera_model}}</div>
						<div class="row bottom a-center">
							<div class="cameraIcon">
								<image style="width: 100%;height: 100%;" src="../../static/stationBoard/cameraIcon.png" mode=""></image>
							</div>
							<div class="statusWrap row flex-column j-sb">
								<div class="status">
									<image v-if="item.camera_status === '在线'" style="width: 20rpx;height: 20rpx;" src="../../static/stationBoard/online.png" mode=""></image>
									<image v-else style="width: 20rpx;height: 20rpx;" src="../../static/stationBoard/offLine.png" mode=""></image>
									{{item.camera_status}}
								</div>
								<div class="click">{{ item.camera_model }}</div>
							</div>
						</div>
					</div>
				</view>
			</uni-section>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import gcoord from 'gcoord';
	import { request } from '@/utils'
	import { onLoad } from '@dcloudio/uni-app'
	const ceshi = () => {
		// uni.requestSubscribeMessage({
		// 	tmplIds: ['gxKDX8GVqLcVSlJ-gz6X_8smffOn42fCFO_T9DPOGlg'],
		// 	success (res) { 
		// 		console.log(res)
		// 	}
		// })
	}
	const id = ref('')
	onLoad((options) => {
		id.value = options.id
		getStationDetails()
	})
	const stationInfo = ref<any>({})
	const covers = ref([{
		id: 1,
		latitude: 39.909,
		longitude: 116.39742,
		iconPath: '../../static/stationBoard/markhq.png'
	}])
	const accessToken = ref('')
	const getStationDetails = async () => {
		const res : any = await request('/api/v1/getStationDetails?permission=stationDetail', { id: id.value }, 'GET')
		stationInfo.value = res.data
		accessToken.value = res.data.accessToken
		const transformzuobiao : any = gcoord.transform([res.data.data.longitude, res.data.data.latitude], gcoord.BD09, gcoord.GCJ02)
		covers.value[0].latitude = transformzuobiao[1]
		covers.value[0].longitude = transformzuobiao[0]
		if (res.data.data.final_status === '正常') {
			covers.value[0].iconPath = '../../static/stationBoard/markzc.png'
		} else if (res.data.data.final_status === '离线') {
			covers.value[0].iconPath = '../../static/stationBoard/marklx.png'
		} else if (res.data.data.final_status === '异常') {
			covers.value[0].iconPath = '../../static/stationBoard/markzy.png'
		}
	}
	// getStationDetails()
	const goVideoPlay = async (item:any) => {
		if(!stationInfo.value.camera.length) {
			uni.showToast({
				title: '暂未配置摄像头',
				icon: 'error'
			})
		} else {
			uni.navigateToMiniProgram({
				appId: 'wxf2b3a0262975d8c2',
				path: `/pages/live/live?accessToken=${accessToken.value}&deviceSerial=${item.camera_sn}&channelNo=${item.camera_channel}`
			})
			// uni.request({
			// 	url: `https://open.ys7.com/api/lapp/token/get?appKey=9b31f0bb8c424d36b8f39403fae35516&appSecret=55d32c2f49e8db1b4132dd2066fe06ba`,
			// 	method: "POST",
			// 	success: (res : any) => {
			// 		if(res.data.code === '200') {
			// 			uni.navigateToMiniProgram({
			// 				appId: 'wxf2b3a0262975d8c2',
			// 				path: `/pages/live/live?accessToken=${res.data.data.accessToken}&deviceSerial=${item.camera_sn}&channelNo=${item.camera_channel}`
			// 			})
			// 		}
			// 		uni.hideLoading(); //关闭loading
			// 	},
			// 	fail: err => {
			// 		uni.hideLoading(); //关闭loading
			// 	},
			// 	complete: () => {
			// 		uni.hideLoading(); //关闭loading
			// 	}
			// });
		}
		// uni.navigateTo({
		// 	url: '/pages/videoplay/videoplay'
		// })
		// uni.navigateToMiniProgram({
		// 	appId: 'wxf2b3a0262975d8c2',
		// 	path: '/pages/live/live?accessToken=at.8282von633lqke697lhur07e93r0j6gu-9rivs7gifh-10b3mmk-tse7sxqyp&deviceSerial=AA7975808&channelNo=1'
		// })
		// uni.navigateTo({
		// 	url: '/pages/videoplay/videoplay'
		// })
	}
</script>

<style lang="scss" scoped>
	::v-deep .distraction {
		font-weight: bold;
	}

	::v-deep .uni-section {
		background-color: #F6F6F6;
	}

	.wrap {
		padding: 24rpx;
		background-color: #F6F6F6;
		padding-bottom: 40rpx;

		.decoration {
			width: 12rpx;
			height: 22rpx;
			margin-right: 4px;
			border-radius: 4rpx;
			font-weight: bold;
			background: linear-gradient(180deg, #2986F6 0%, #6FABFC 100%);
		}

		.map {
			height: 488rpx;
		}

		.stationInfo {
			height: 420rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			box-shadow: 0px 3px 6px rgba(191, 191, 191, 0.16);

			// margin-bottom: 20rpx;
			.stationName {
				font-size: 28rpx;
				color: #151516;
				font-weight: bold;
			}

			.infoItem {
				width: 100%;
				font-size: 24rpx;
				color: #484848;
				.infoName {
					width: 70rpx;
				}

				.infoValue {
					margin-left: 45rpx;
					// width: 200rpx;
					width: calc(100% - 115rpx);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					.statusIcon {
						margin-right: 10rpx;
					}
				}
			}
		}

		.dataStatus {
			.dataWrap {
				padding: 22rpx 22rpx;
				height: 328rpx;
				background-color: #ffffff;
				box-shadow: 0px 3px 6px rgba(170, 175, 175, 0.16);
				border-radius: 16rpx;

				.dataItem {
					width: 45%;

					.dataInfo {
						color: #484848;
						font-weight: bold;
						margin-left: 26rpx;

						.dataName {
							font-size: 20rpx;
							margin-bottom: 12rpx;
						}

						.dataStatus {
							font-size: 28rpx;
						}
					}
				}
			}
		}

		.alarm {
			margin-bottom: 10rpx;

			.alarmWrap {
				padding: 24rpx;
				background-color: #fff;
				box-shadow: 0px 3px 6px rgba(149, 149, 149, 0.16);
				border-radius: 16rpx;

				.alarmItem {
					border-bottom: 1px solid #E3F1F0;
					padding: 14rpx 0;
					margin-bottom: 13rpx;

					.top {
						.topStatus {
							// width: 76rpx;
							padding: 10rpx 16rpx;
							height: 32rpx;
							line-height: 0rpx;
							font-size: 22rpx;
							font-weight: bold;
							color: #3665FF;
							border-radius: 16rpx;
							background: rgba(54, 101, 255, 0.39);
							margin-bottom: 20rpx;
						}

						.tishi, .qingwei {
							background: rgba(0, 206, 234, 0.39);
							color: #00CEEA;
							
						}

						.yiban {
							background: #FEFBE3;
							color: #F5C400;
						}

						.jinji {
							background: rgba(217, 70, 61, 0.39);
							color: #d9463d;
						}
						
						.zhongyao, .zhongda {
							color: #FE9805;
							background: rgba(254, 152, 5, 0.39);
						}
						
						.yanzhong {
							color: #d9463d;
							background-color: rgba(217, 70, 61, 0.39);
						}

						.desc {
							font-weight: bold;
							font-size: 22rpx;
							color: #151516;
							margin-left: 20rpx;
						}
					}

					.bottom {
						.time {
							font-size: 20rpx;
							color: #212121
						}

						.delStatus {
							font-size: 22rpx;
							font-weight: bold;
							color: #3665FF;
						}
					}
				}
			}
		}

		.video {
			.videoWrap {
				// height: 400rpx;
				box-shadow: 0px 3px 6px rgba(149, 149, 149, 0.16);
				border-radius: 16rpx;
				background-color: #ffffff;
				padding: 40rpx 50rpx 25rpx 50rpx;

				.videoPlay {
					width: 100%;
					height: 100%;
				}
				
				.item {
					width: 50%;
					margin-bottom: 40rpx;
					.cameraName {
						font-size: 24rpx;
						color: #333333;
						font-weight: bold;
						margin-bottom: 24rpx;
						white-space: nowrap; 
						overflow: hidden; 
						text-overflow: ellipsis; 
						
					}
					.bottom {
						.cameraIcon {
							width: 90rpx;
							height: 94rpx;
							margin-right: 20rpx;
						}
						.statusWrap {
							height: 90rpx;
							.status {
								font-size: 20rpx;
								color: #333333;
							}
							.click {
								font-size: 20rpx;
							}
						}
					}
				}
			}
		}
	}
</style>